import {Navigate , useRoutes} from 'react-router-dom' //重定向 , 配置路由表
import { lazy, Suspense } from 'react'; //路由懒加载

import Loading from '../components/Loading'   //引入正在加载组件 引入要在最上面

const Login = lazy(() => import("../pages/Login"))
const Main = lazy(() => import("../pages/Main"))
const NotFound = lazy(() => import("../components/NotFound"))
const Home = lazy(() => import("../pages/Main/Home"))
const About = lazy(() => import("../pages/Main/About"))
const List = lazy(() => import("../components/List"))



//封装函数传懒加载组件
const load = (Comp) => {
    return (
        <Suspense fallback={<Loading/>}>
            <Comp />
        </Suspense>
    )
}


//路由表配置
export const routes = [
    {
        path: "/login",
        element: load(Login)
    },
    {
        path: "/main",
        element: load(Main),
        children:[
            {
                path: "/main/home",
                element: load(Home),
                children: [
                    {
                        path: "/main/home/music/:id",
                        element: load(List),
                    },
                    {
                        path: "/main/home/news/:id",
                        element: load(List),
                    }
                ]  
            },
            {
                path: "/main/about",
                element: load(About),
            },
        ] 
    },
    {
        path: "/",
        element: <Navigate to="/login"/>
    },
    {
        path: "*",
        element: <NotFound/>
    },
]


//把路由表配置转换为路由给App使用
export const GetRoutes = () => {
    return useRoutes(routes)
}

